<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
	</head>
	<body>
		<div id="app">
			<h1 align="center">
				增删改查操作
			</h1>
			<hr/>
			<h3 align="center">添加操作</h3>
			<table border="1px" cellspacing="0px" cellpadding="" align="center">
				<tr>
					<td>ID编号:</td>
					<td>
						<input type="number" placeholder="ID为默认值" disabled/>
					</td>
					<td rowspan="4">
						<button type="button" @click="saveUser">添加</button>
					</td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td>
						<input type="text" placeholder="请输入姓名..." v-model="insertUser.name"/>
					</td>
				</tr>
				<tr>
					<td>年龄:</td>
					<td>
						<input type="number" placeholder="请输入年龄..." v-model="insertUser.age"/>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="男" v-model="insertUser.sex"/>男&nbsp;&nbsp;&nbsp;
						<input type="radio" name="sex" value="女" v-model="insertUser.sex"/>女
					</td>
				</tr>
			</table>
			<hr/>
			<h3 align="center">修改操作</h3>
			<table border="1px" cellspacing="0px" cellpadding="" align="center">
				<tr>
					<td>ID编号:</td>
					<td>
						<input type="number" placeholder="ID为默认值" disabled/>
					</td>
					<td rowspan="4">
						<button type="button" @click="updateUserById">修改</button>
					</td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td>
						<input type="text" placeholder="请输入修改的姓名..." v-model="user.name"/>
					</td>
				</tr>
				<tr>
					<td>年龄:</td>
					<td>
						<input type="number" placeholder="请输入修改的年龄..." v-model="user.age"/>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="男" v-model="user.sex"/>男&nbsp;&nbsp;&nbsp;
						<input type="radio" name="sex" value="女" v-model="user.sex"/>女
					</td>
				</tr>
			</table>
			<hr/>
			<h3 align="center">查找操作</h3>
			<table border="1px" cellspacing="0px" cellpadding="" align="center">
				<tr>
					<td>
						<input type="number" v-model="findUser.id" placeholder="请输入ID..." />
					</td>
					<td>
						<input type="text" v-model="findUser.name" placeholder="请输入姓名..." />
					</td>
					<td>
						<input type="number" v-model="findUser.age" placeholder="请输入年龄..." />
					</td>
					<td>
						<input type="text" v-model="findUser.sex" placeholder="请输入性别..." />
					</td>
					<td rowspan="2">
						<button type="button" @click="findUserByIN">通过输入不为空查询</button>
					</td>
					<td rowspan="2">
						<button type="button" @click="findAll">查询所有列表</button>
					</td>
				</tr>
				<tr align="center">
					<td>
						<button type="button" @click="findUserByIN">通过Id查询</button>
					</td>
					<td>
						<button type="button" @click="findUserByIN">通过姓名查询</button>
					</td>
					<td>
						<button type="button" @click="findUserByIN">通过年龄查询</button>
					</td>
					<td>
						<button type="button" @click="findUserByIN">通过性别查询</button>
					</td>
				</tr>
			</table>
			<hr/>
			<h3 align="center">查找用户信息操作</h3>
			<table border="1px" cellspacing="0px" cellpadding="" align="center">
				<tr>
					<th>ID编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr v-for="user in userList">
					<th v-text="user.id"></th>
					<th v-text="user.name"></th>
					<th v-text="user.age"></th>
					<th v-text="user.sex"></th>
					<th>
						<button type="button" @click="updateUser(user)">修改</button>
						<button type="button" @click="deleteUserById(user)">删除</button>
					</th>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			axios.defaults.baseURL = "http://localhost:8080"
			const app = new Vue({
				el:"#app",
				data:{
					userList:[],
					user:{id:"",name:"",age:"",sex:""},
					insertUser:{id:"",name:"",age:"",sex:""},
					findUser:{id:"",name:"",age:"",sex:""}
				},
				methods:{
					async findUserByIN(){
						let {data:result} = await axios.get("/user/findUser",{params:this.findUser})
						this.userList = result
						this.findUser = {}
					},
					async deleteUserById(user){
						let {status:status} = await axios.delete("/user/deleteUserById",{params:user})
						if(status === 200){
							alert("删除成功！")
							this.findAll()
						}else{
							alert("删除失败！")
						}
					},
					async updateUser(user){
						this.user = user
					},
					async updateUserById(){
						let {status:status} = await axios.put("/user/updateUserById",this.user)
						if(status === 200){
							alert("修改成功!")
							this.user = {}
							this.findAll()
						}else{
							alert("修改失败!")
						}
					},
					async saveUser(){
						let {status:status} = await axios.post("/user/saveUser",this.insertUser)
						if(status === 200){
							alert("添加成功!")
							this.insertUser = {}
							this.findAll()
						}else{
							alert("添加失败!")
						}
					},
					async findAll(){
						let {data:result} = await 
							axios.get("/user/findAll")
						this.userList = result
					}
				},
				mounted(){
					this.findAll()
				}
			})
		</script>
	</body>
</html>
